<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>流程图模板</title>
        <script src="https://d3js.org/d3.v7.min.js"></script>
        <style>
            .node {
                cursor: pointer;
            }
            .node rect {
                stroke-width: 1px;
            }
            .node text {
                font-size: 14px;
                font-family: Arial, sans-serif;
                text-anchor: middle;
                dominant-baseline: middle;
            }
            .link {
                fill: none;
                stroke: #999;
                stroke-width: 1.5px;
            }
            .comment {
                fill: #4caf50;
                stroke: #4caf50;
            }
        </style>
    </head>
    <body>
        <svg id="flowchart" width="800" height="600"></svg>
        <script>
            // 定义节点数据
            const nodes = [
                { id: 0, label: "开始", type: "start", x: 400, y: 50 },
                { id: 1, label: "开机", type: "process", x: 400, y: 120 },
                { id: 2, label: "扫描环境", type: "normal", x: 400, y: 190 },
                {
                    id: 3,
                    label: "生成地图和位置",
                    type: "normal",
                    x: 400,
                    y: 260,
                },
                { id: 4, label: "计划路线", type: "normal", x: 400, y: 330 },
                { id: 5, label: "启动", type: "process", x: 400, y: 400 },
                { id: 6, label: "跑线", type: "comment", x: 550, y: 330 },
            ];

            // 定义连接线数据
            const links = [
                { source: 0, target: 1 },
                { source: 1, target: 2 },
                { source: 2, target: 3 },
                { source: 3, target: 4 },
                { source: 4, target: 5 },
                { source: 4, target: 6 },
            ];

            // 获取SVG容器
            const svg = d3.select("#flowchart");

            // 创建连接线
            const link = svg
                .selectAll(".link")
                .data(links)
                .enter()
                .append("path")
                .attr("class", "link")
                .attr("d", (d) => {
                    const sourceNode = nodes[d.source];
                    const targetNode = nodes[d.target];

                    if (targetNode.type === "comment") {
                        return `M${sourceNode.x},${sourceNode.y} L${targetNode.x},${targetNode.y}`;
                    } else {
                        return `M${sourceNode.x},${sourceNode.y} L${sourceNode.x},${targetNode.y}`;
                    }
                });

            // 创建节点组
            const node = svg
                .selectAll(".node")
                .data(nodes)
                .enter()
                .append("g")
                .attr("class", "node")
                .attr("transform", (d) => `translate(${d.x},${d.y})`);

            // 添加节点形状
            node.each(function (d) {
                const g = d3.select(this);
                if (d.type === "start") {
                    g.append("ellipse")
                        .attr("rx", 40)
                        .attr("ry", 25)
                        .attr("fill", "#FFE4B5")
                        .attr("stroke", "#FFA500");
                } else if (d.type === "process") {
                    g.append("rect")
                        .attr("x", -50)
                        .attr("y", -25)
                        .attr("width", 100)
                        .attr("height", 50)
                        .attr("fill", "#E6E6FA")
                        .attr("stroke", "#9370DB")
                        .attr("transform", "skewX(-10)");
                } else if (d.type === "comment") {
                    g.append("path")
                        .attr("d", "M-40,-25 L40,-25 L40,25 L-40,25 L-40,-25")
                        .attr("fill", "#E8F5E9")
                        .attr("stroke", "#4CAF50")
                        .attr("rx", 5)
                        .attr("ry", 5);
                } else {
                    g.append("rect")
                        .attr("x", -50)
                        .attr("y", -25)
                        .attr("width", 100)
                        .attr("height", 50)
                        .attr("fill", "#E3F2FD")
                        .attr("stroke", "#90CAF9")
                        .attr("rx", 2)
                        .attr("ry", 2);
                }
            });

            // 添加文本标签
            node.append("text")
                .text((d) => d.label)
                .attr("fill", "#333");
        </script>
    </body>
</html>
